<template>
    <div class="jump-animation" :class="{ 'animation-complete': isComplete }">
      <div class="warp-tunnel">
        <div class="light-speed-lines"></div>
      </div>
      <div class="cockpit">
        <div class="cockpit-frame"></div>
        <div class="cockpit-content">
          <!-- 这里放置你的实际驾驶舱内容 -->
          <slot></slot>
        </div>
      </div>
    </div>
  
  </template>
  
  <script>
  export default {
    name: 'JumpAnimation',
    data() {
      return {
        isComplete: false
      }
    },
    mounted() {
      setTimeout(() => {
        this.isComplete = true;
      }, 2000); // 动画持续2秒
    }
  }
  </script>
  
  <style lang="less" scoped>
  .jump-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    overflow: hidden;
  }
  
  .warp-tunnel {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    perspective: 1000px;
    transform-style: preserve-3d;
    animation: tunnel-zoom 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
  
  .light-speed-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
      repeating-linear-gradient(
        90deg,
        transparent 0%,
        transparent 5%,
        rgba(255, 255, 255, 0.2) 5.1%,
        transparent 5.2%
      ),
      radial-gradient(circle at 50% 50%, #0066ff, #000 60%);
    transform: translateZ(0);
    animation: light-speed 0.5s linear infinite;
  }
  
  .cockpit {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.5);
    animation: cockpit-enter 0.5s cubic-bezier(0.19, 1, 0.22, 1) 1.5s forwards;
  }
  
  .cockpit-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
      linear-gradient(135deg, rgba(0,0,0,0.8) 0%, transparent 100%),
      linear-gradient(45deg, rgba(0,0,0,0.8) 0%, transparent 100%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  }
  
  @keyframes tunnel-zoom {
    0% {
      transform: translateZ(0) scale(1);
    }
    50% {
      transform: translateZ(2000px) scale(0.1);
    }
    100% {
      transform: translateZ(4000px) scale(0);
    }
  }
  
  @keyframes light-speed {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes cockpit-enter {
    0% {
      opacity: 0;
      transform: scale(1.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .animation-complete {
    animation: fade-out 0.5s forwards;
  }
  
  @keyframes fade-out {
    to {
      pointer-events: none;
    }
  }
  </style>